<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝左右按键+下图标轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 200px auto;
            border: 1px solid #000000;
            padding: 5px;
            width: 500px;
            height: 308px;
        }
        .inner{
            width: 500px;
            height: 308px;
            position: relative;
            overflow: hidden;
        }
        ul{
            /*float: left;*/
            list-style: none;
            width: 300%;
            position: absolute;
            left: 0;
        }
        ul li {
            float: left;
        }
        #buttonRight{
            height: 80px;
            width: 40px;
            opacity: 0.5;
            font-size: 60px;
            position: absolute;
            right: 10px;
            top: 120px;
            background: aqua;
            cursor:pointer;
        }
        #buttonLeft{
            height: 80px;
            width: 40px;
            font-size: 60px;
            position: absolute;
            opacity: 0.5;
            left: 10px;
            top: 120px;
            background: aqua;
            cursor:pointer;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="inner">
        <ul id="ul1">
            <li><img src="imgs/1.jpg" alt=""></li>
            <li><img src="imgs/2.jpg" alt=""></li>
            <li><img src="imgs/3.jpg" alt=""></li>
        </ul>
        <span id="buttonLeft"><</span>
        <span id="buttonRight">></span>
    </div>
    <div id="newOl">
        <ol>

        </ol>
    </div>
</div>
<script>
    // 1.获取事件源以及相关
    // 2.绑定事件
    // 3.针对绑定事件添加驱动程序
    //    需求：1.点击左右箭头按钮图片可以轮播滑动
    //         2.做到无缝轮播
    var btnRight=document.getElementById('buttonRight');
    var btnLeft=document.getElementById('buttonLeft');
    var ul1=document.getElementById('ul1');
    var ul1Arr=ul1.children;
    console.log(ul1Arr.length);
    var i=0;
    btnLeft.onclick=function () {
        i++;
        if(i>ul1Arr.length-1){
            i=ul1Arr.length-1;
            alert('到底啦！');
        }
        animation(ul1,-i*500);
    };
    btnRight.onclick=function () {
        i--;
        if(i<0){
            i=0;
            alert('到底啦！');
        }
        animation(ul1,-i*500);
    };

    function animation(ele,target) {
        // var i=0;
        console.log('我就是来实验的');
        clearInterval(ele.timer);
        var speed=target>ele.offsetLeft?10:-10;

        ele.timer=setInterval(function () {
            ele.style.left=ele.offsetLeft+speed+'px';
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(speed)){
                ele.style.left=target+'px';
                clearInterval(ele.timer);
            }
        },5)

    }
</script>
</body>
</html>